<template>
	<div class="vr-container">
		<!-- A-Frame 场景 -->
		<a-scene v-if="currentScene" vr-mode-ui="enabled: false" id="textContainer">
			<!-- 全景图片 -->
			<a-sky :src="currentScene" rotation="0 -90 0" crossorigin="anonymous"></a-sky>

			<!-- 光标 -->
			<!-- <a-entity cursor="rayOrigin: mouse" fuse="true" fuse-timeout="500"></a-entity> -->

			<!-- 视觉标识 - 使用图片 -->
			<!-- <template v-for="(marker,index) in markers" :key="index">
				<a-image :src="marker.src" :position="marker.position" :rotation="marker.rotation"
					@click="moveCameraToTarget"></a-image>
			</template> -->

			<a-camera ref="camera" position="0 1.6 0"
				look-controls="touchEnabled: true; mouseEnabled: true; magicWindowTrackingEnabled: false; gyroEnabled: false">
				<!-- <a-cursor></a-cursor> -->
			</a-camera>

		</a-scene>

		<!-- 加载状态 -->
		<div v-else class="loading f-24 text-white">加载中...</div>

		<!-- 缩略图列表 -->
		<div class="thumbnail-container">
			<div v-for="(scene, index) in scenes" :key="index" class="thumbnail-item"
				:class="{ 'active': currentIndex === index }" @click="switchScene(index)">
				<img :src="scene" />
				<span class="thumbnail-title">{{ `场景${index+1}` }}</span>
			</div>
		</div>
	</div>
</template>

<script setup>
	import { ref, onMounted } from 'vue';
	import 'aframe';
	import vrImg01 from '@/static/vr-01.jpg'
	import vrImg02 from '@/static/vr-02.jpg'
	import vrImg03 from '@/static/vr-03.jpg'
	import icon01 from '@/static/icon-01.png'

	const { api_get_ancestralHall } = useRequest();

	// 定义场景数据
	const scenes = ref([]);

	const currentIndex = ref(0);
	const currentScene = ref(null);
	const camera = ref(null)
	const markers = [
		{ src: icon01, position: '0 2.5 -3', rotation: '0 0 0' },
	]

	// 切换场景
	const switchScene = (index) => {
		currentIndex.value = index;
		currentScene.value = null;

		// 短暂延迟后加载新场景
		setTimeout(() => {
			currentScene.value = scenes.value[currentIndex.value];
		}, 200);
	};

	const loadDetail = () => {
		// let arr = [vrImg01, vrImg02, vrImg03]
		// currentScene.value = arr[0];
		// scenes.value = arr
		// return
		api_get_ancestralHall().then(res => {
			let arr = res.vrImage.split(',')
			if (arr.length) {
				currentScene.value = arr[0];
				scenes.value = arr
			} else {
				uni.showToast({
					icon: 'none',
					title: '暂无数据'
				})
			}
		})
	}

	// 移动相机到图片位置
	const moveCameraToTarget = (event) => {
		const target = event.target.object3D;

		// 计算目标位置（保持原有相机高度）
		const targetPosition = target.position.clone();
		targetPosition.y += 1.6; // 保持人眼高度

		// 设置相机动画
		camera.value.setAttribute('animation', {
			property: 'position',
			to: `${targetPosition.x} ${targetPosition.y} ${targetPosition.z + 0.5}`,
			dur: 1500,
			easing: 'easeInOutCubic'
		});
	};

	onLoad(() => {
		loadDetail()
	})
</script>

<style scoped>
	.vr-container {
		width: 100%;
		height: 100vh;
		position: relative;
	}

	.loading {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: white;
		background-color: rgba(0, 0, 0, 0.7);
		padding: 20rpx;
		border-radius: 10px;
		z-index: 100;
	}

	/* 缩略图容器 */
	.thumbnail-container {
		position: fixed;
		left: 20rpx;
		bottom: 20rpx;
		width: 710rpx;
		overflow-x: auto;
		/* 启用横向滚动 */
		white-space: nowrap;
		/* 防止内容换行 */
		-webkit-overflow-scrolling: touch;
		/* 在iOS上平滑滚动 */
	}

	/* 单个缩略图 */
	.thumbnail-item {
		width: 80rpx;
		height: 80rpx;
		cursor: pointer;
		position: relative;
		transition: transform 0.2s;
		border: 2rpx solid transparent;
		display: inline-block;
	}

	.thumbnail-item:hover {
		transform: scale(1.05);
	}

	.thumbnail-item.active {
		border-color: #4CC3D9;
	}

	.thumbnail-item img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		border-radius: 4rpx;
	}

	.thumbnail-title {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: rgba(0, 0, 0, 0.6);
		color: white;
		font-size: 20rpx;
		padding: 2rpx;
		text-align: center;
		border-bottom-left-radius: 4rpx;
		border-bottom-right-radius: 4rpx;
	}
</style>